<template>
	<div class="board1 pannel">
		<div class="pannel-title">受众用户为满足以下条件的用户（必选）</div>
		<div class="pannel-content">
			<div class="line"><span>且</span></div>
			<div class="user-attribute">
				<div class="attribute-title">
					<i class="el-icon-remove-outline"></i>
					<span>用户属性满足</span>
					<span class="add-main-item" @click="addUserAttribute"><i
							class="el-icon-circle-plus"></i><span>添加</span></span>
				</div>
				<div class="contentProperties" id="divContentProperties">
					<div class="line" v-show="form.userAttributes.length>1"><span>且</span></div>
					<div v-show="form.userAttributes.length>0">
						<div label="" style="display: block;padding-left:10px;" label-width="0px">
							<div class="attribute-item" v-for="(v,index) in form.userAttributes">
								<el-select v-model='form.userAttributes[index].attributeName' style="width:120px" class="line-item"
									value-key='attributeRemark' @change="userAttributeChangeFun(form.userAttributes,index)">
									<el-option v-for="dict in userAttributeOptions" :key="dict.id"
										:label="dict.attributeRemark" :value="dict" />
								</el-select>

								<el-select v-model="form.userAttributes[index].valueExpression" style="width:120px"
									class="line-item" @change="eventPropertyChange(form.userAttributes[index],index)">
									<el-option v-for="dict in userPropertysOptions" :key="dict.id"
										:label="dict.eventItemExpression" :value="dict.eventItemCode" />
								</el-select>
								<el-input v-model="form.userAttributes[index].value1Str" type="text"
									controls-position="right" style="width:100px" class="line-item"
									v-show="form.userAttributes[index].valueExpression!='between'">
								</el-input>
								<span v-show="form.userAttributes[index].valueExpression=='between'">
									<el-input v-model="form.userAttributes[index].value1Str" type="text"
										controls-position="right" style="width:90px">
									</el-input>与
									<el-input v-model="form.userAttributes[index].value2Str" type="text"
										controls-position="right" style="width:90px">
									</el-input>之间
								</span>
								<el-link type="primary" :underline="false" style="padding-left:20px;font-size:18px"
									@click="removeRule(form.userAttributes,index)">
									<i class="el-icon-remove"></i>
								</el-link>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="user-actions">
				<div class="attribute-title">
					<i class="el-icon-remove-outline"></i>
					<span>用户行为满足</span>
					<span class="add-main-item" @click="addUserActions"><i
							class="el-icon-circle-plus"></i><span>添加</span></span>
				</div>
				<div class="contentProperties" id="divContentActions">
					<div class="line" v-show="form.userActions.length>1"><span>且</span></div>

					<div label="" style="display: block;padding-left:10px;" v-show="form.userActions.length>0"
						label-width="0px">
						<div class="action-item" v-for="(v,index) in form.userActions">
							<span class="indexButton">{{indexOptions[index]}}</span>
							<el-date-picker class="line-item" v-model="form.userActions[index].dataRange" size="small"
								style="width: 240px" value-format="yyyy-MM-dd" type="daterange" range-separator="-"
								:picker-options="pickerOptions" start-placeholder="开始日期" end-placeholder="结束日期">
							</el-date-picker>
							<el-select class="line-item" v-model="form.userActions[index].doThings" style="width:120px"
								size="small" @change="eventPropertyChange(form.userActions[index],index)">
								<el-option label="做过" value="do" />
								<el-option label="未做过" value="undo" />
							</el-select>
							<el-select class="line-item" v-model="form.userActions[index].eventType" style="width:120px"
								@change="eventTypeChange(funnelRuleType,index)" value-key="id" size="small">
								<el-option v-for="dict in eventTypeOptions" :key="dict.id" :label="dict.eventTypeName"
									:value="dict" />
							</el-select>
							<el-link type="primary" :underline="false" style="padding-left:20px;"
								@click="addActionEventItem(form.userActions[index].eventItems,index)">
								<i class="el-icon-plus"></i>添加筛选
							</el-link>
							<el-link type="primary" :underline="false" style="padding-left:20px;font-size:18px"
								@click="removeActionRule(form.userActions,index)">
								<i class="el-icon-remove"></i>
							</el-link>
							<div class="el-row-mode" v-for="(item,itemIndex) in form.userActions[index].eventItems">
								<el-select class="line-item" v-model="item.eventItem" style="width:120px" size="small"
									value-key="id">
									<el-option
										v-for="dict in allEventItemListOpts[form.userActions[index].eventType.id]"
										:key="dict.id" :label="dict.eventItemName" :value="dict" />
								</el-select>
								<el-select class="line-item" v-model="item.eventItemExpression" style="width:100px" size="small">
									<el-option v-for="dict in eventPropertysOptions[item.eventItem.valueType]"
										:key="dict.id" :label="dict.eventItemExpression" :value="dict.eventItemCode" />
								</el-select>
								<el-input class="line-item" size="small" v-model="item.value1Str" type="text"
									controls-position="right" style="width:100px" v-show="item.eventItemExpression != 'between'"></el-input>
								<span v-show="item.eventItemExpression === 'between'">
									<el-input v-model="item.value1Str" type="text" size="small"
										controls-position="right" style="width:90px"></el-input> 与
									<el-input v-model="item.value2Str" type="text" size="small"
										controls-position="right" style="width:90px"></el-input>之间
								</span>
								<el-link @click="removeOrderEventRule(form.userActions[index].eventItems,itemIndex)"
									type="primary" style="padding-left:20px;font-size:18px" icon="el-icon-remove">
								</el-link>
							</div>
							<div class="el-row-mode">
								<el-cascader class="line-item" size="small"
									v-model="form.userActions[index].eventMethod"
									:options="allEventItemMethodOpts[form.userActions[index].eventType.id]"
									:props="{ expandTrigger: 'hover',multiple:false}"
									@change="selectItemMethod(formItem,indexA)"></el-cascader>
								<el-select class="line-item" size="small"
									v-model="form.userActions[index].eventItemExpression" style="width:120px"
									@change="eventPropertyChange(funnelRuleType[index],index)">
									<el-option v-for="dict in eventPropertysOptions['02']" :key="dict.id"
										:label="dict.eventItemExpression" :value="dict.eventItemCode" />
								</el-select>
								<el-input class="line-item" v-model="form.userActions[index].value1Str" type="text"
									controls-position="right" style="width:100px" size="small"
									v-show="ruleTypes3Flag==1"></el-input>
								<span v-show="ruleTypes3Flag==2">
									<el-input v-model="form.userActions[index].value1Str" size="small" type="text"
										controls-position="right" style="width:90px">
									</el-input>与
									<el-input v-model="form.userActions[index].value2Str" size="small" type="text"
										controls-position="right" style="width:90px">
									</el-input>之间
								</span>
							</div>
						</div>
					</div>
				</div>

			</div>

			<div class="user-actions-order">
				<div class="attribute-title">
					<i class="el-icon-remove-outline"></i>
					<span>行为序列满足</span>
					<span class="add-main-item" @click="addActionOrders"><i
							class="el-icon-circle-plus"></i><span>添加</span></span>
				</div>

				<div class="contentProperties" id="divActionOrders">
					<div class="line" v-show="form.userActionOrders.length>1"><span>且</span></div>

					<div v-show="form.userActionOrders.length>0">
						<div class="actionOrder-item" v-for="(v,index) in form.userActionOrders">
							<span class="indexButton">{{indexOptions[index]}}</span>
							<el-date-picker v-model="form.userActionOrders[index].dataRange" size="small"
								style="width: 240px" value-format="yyyy-MM-dd" type="daterange" range-separator="-"
								:picker-options="pickerOptions" start-placeholder="开始日期" end-placeholder="结束日期">
							</el-date-picker>
							依次做过
							<el-link type="primary" :underline="false" style="padding-left:20px;"
								@click="addActionOrderEventItem(form.userActionOrders[index].eventItems,index)">
								<i class="el-icon-plus"></i>添加筛选
							</el-link>
							<el-link type="primary" :underline="false" style="padding-left:20px;font-size:18px"
								@click="removeActionOrderRule(form.userActionOrders,index)">
								<i class="el-icon-remove"></i>
							</el-link>
							<div class="el-row-mode actionOrder-item-item"
								v-for="(item,itemIndex) in form.userActionOrders[index].eventItems">
								<span class="secondButton">{{indexOptions[index]+''+(itemIndex+1)}}</span>
								<el-select class="little-line-item" v-model="item.eventId" style="width:120px"
									size="small" @change="eventTypeChange(funnelRuleType,index)">
									<el-option v-for="dict in eventTypeOptions" :key="dict.id"
										:label="dict.eventTypeName" :value="dict.id" />
								</el-select>
								<el-select v-model="item.eventItem" style="width:120px" size="small" value-key="id"
									class="little-line-item">
									<el-option v-for="dict in allEventItemListOpts[item.eventId]" :key="dict.id"
										:label="dict.eventItemName" :value="dict" />
								</el-select>
								<el-select v-model="item.eventItemExpression" style="width:120px"
									@change="eventPropertyChange(funnelRuleType[index],index)" size="small"
									class="little-line-item">
									<el-option v-for="dict in eventPropertysOptions[item.eventItem.valueType]"
										:key="dict.id" :label="dict.eventItemExpression" :value="dict.eventItemCode" />
								</el-select>
								<el-input v-model="item.value1Str" type="text" size="small" controls-position="right"
									style="width:100px" v-show="ruleTypes3Flag==1"></el-input>
								<span v-show="ruleTypes3Flag==2">
									<el-input v-model="item.value1Str" type="text" controls-position="right"
										style="width:90px"></el-input>
									与
									<el-input v-model="item.value2Str" type="text" size="small"
										controls-position="right" style="width:90px"></el-input>
									之间
								</span>
								<el-link
									@click="removeOrderEventRule(form.userActionOrders[index].eventItems,itemIndex)"
									type="primary" style="padding-left:20px;font-size:18px" icon="el-icon-remove">
								</el-link>

							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div style="margin-top:20px;padding-left:10px;">
			<div class="preview-count-people">预估人数：</div>
			<el-select v-model="form.prevNumber">
				<el-option label="按全量计算" value="1" />
				<el-option label="按1/2抽样计算" value="2" />
				<el-option label="按1/4抽样计算" value="4" />
				<el-option label="按1/8抽样计算" value="8" />
				<el-option label="按1/16抽样计算" value="16" />
				<el-option label="按1/32抽样计算" value="32" />
				<el-option label="按1/64抽样计算" value="64" />
			</el-select>
			<el-button type="primary" @click="preSummaryFun">预估</el-button> <span
				class="caclResult">{{calcGroupNum}}</span>
		</div>
	</div>

</template>

<script>
	import {
		getTriggerType,
		formatTime,
		formatDate
	} from '../utils.js'
  import {getUserAttributeList} from "@/api/config/userattribute";
  import {listAllPropertyResult, listPropertyByType} from "@/api/config/property";
  import {allEventItemsOptions, eventTypeOptions} from "@/api/config/item";
  import {getAllEventMethodResult} from "@/api/config/emethod";
  import {calcUserGroupNumber} from "@/api/base/group";

	export default {
		name: "board1",
		data() {
			return {
				form: {
					name: '',
					userAttributes: [],
					userActions: [],
					userActionOrders: [],
					limitNumberFlag: false,
					limitType: '1',
					resultNum: 0,
					buildType: '01',
					globalStr: '且',
					attributeStr: '且',
					actionStr: '且',
					orderStr: '且',
					taskType: 0,
				},
				eventTypeOptions: [],
				allEventItemMethodOpts: {},
				eventPropertysOptions: {},
				userAttributeOptions: [],
				userPropertysOptions: [],
				ruleTypes3Flag: 0,
				allEventItemListOpts: {},
				pickerOptions: {
					shortcuts: [{
						text: '今日',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '昨日',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '本周',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							const day = start.getDay() || 7;
							var newStart = new Date(start.getFullYear(), start.getMonth(), start.getDate() + 1 -
								day);
							picker.$emit('pick', [newStart, end]);
						}
					}, {
						text: '上周',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近一周',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近一个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近三个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
							picker.$emit('pick', [start, end]);
						}
					}]
				},
				indexOptions: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
					'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
				],
				calcGroupNum: '',

			}
		},
    computed: {
      atttributeForm() {
        return {
          userAttributes : this.form.userAttributes,
          userActions : this.form.userActions,
          userActionOrders : this.form.userActionOrders
        }
      }
    },

    watch: {
      atttributeForm(newval) {
        this.$emit('board1', newval)
      }
    },
		created() {
      this.getUserAttributeList();
      this.getEventTypeList();
      this.getAllEventItemsList();
		},
		methods: {
			addUserAttribute() {
				let userAttribute = {
					attributeName: '',
					attributeRemark: '',
					valueExpression: '',
					dataType: '',
					valueType: '',
					value1Str: '',
					value2Str: '',
				};
				this.form.userAttributes.push(userAttribute);
			},

      getUserAttributeList() {
        var param = {
          status: "Y",
        };
        getUserAttributeList(param).then((response) => {
          this.userAttributeOptions = response.data;
        });
      },

      userAttributeChangeFun(array, index) {
        array[index].valueExpression = "";
        array[index].value1Str = "";
        array[index].value2Str = "";
        listPropertyByType({
          valueType: array[index].dataType,
        }).then((response) => {
          this.userPropertysOptions = response.data;
        });
      },

      eventPropertyChange(obj, index) {
        if (obj.eventItemExpression == "between") {
          this.ruleTypes3Flag = 2;
        } else {
          this.ruleTypes3Flag = 1;
        }
      },

      getEventTypeList() {
        var param = {
          status: "Y",
        };
        eventTypeOptions(param).then((response) => {
          this.eventTypeOptions = response.data;
        });
      },
      getAllEventItemsList() {
        allEventItemsOptions().then((response) => {
          this.allEventItemListOpts = response.data;
        });
        listAllPropertyResult().then((response) => {
          this.eventPropertysOptions = response.data;
        });
        getAllEventMethodResult().then((response) => {
          this.allEventItemMethodOpts = response.data;
        });
      },

			addUserActions() {
				let userAction = {
					dataRange: [],
					eventItems: [],
					doThings: '',
					eventType: {}
				};
				this.form.userActions.push(userAction);
			},

			addActionEventItem(itemArray, index) {
				let eventItem = {
					eventItem: {},
					eventItemExpression: '',
					valueType: '',
					value1Str: '',
					value2Str: '',
				};
				itemArray.push(eventItem);
			},

			addActionOrders() {
				let actionOrder = {
					dataRange: [],
					eventItems: []
				};
				this.form.userActionOrders.push(actionOrder);
			},

			addActionOrderEventItem(itemArray) {
				let eventItem = {
					eventId: '',
					eventItem: {},
					eventItemExpression: '',
					valueType: '',
					value1Str: '',
					value2Str: '',
				};
				itemArray.push(eventItem);
			},

			preSummaryFun() {
				this.form.name = 'user_group_' + this.form.name;
				let requestJson = JSON.stringify(this.form);
				calcUserGroupNumber({
					requestJson: requestJson
				}).then(response => {
					if (response.code === 200) {
						let num = response.data;
						if (num) {
							this.form.resultNum = num;
							this.calcGroupNum = num + ' 人';
						} else {
							this.calcGroupNum = '所选范围内，没有符合该条件的用户';
						}
					} else {
						this.msgError(response.msg);
					}
				});
			}
		}

	};
</script>

<style lang="scss">
	$base-color-blue: #00BF8A;

	.board1 {
		@mixin box-base-setup {
			padding: 12px 13px;
			border: 1px solid #dddddd;
			border-radius: 5px;
			margin-bottom: 16px;
		}

		@mixin pointer-line {
			position: absolute;
			height: 100%;
			border: 1px solid $base-color-blue;
			left: 0;
			width: 0;
		}

		@mixin line-span-position {
			position: absolute;
			display: block;
			height: 25px;
			line-height: 25px;
			width: 25px;
			border-radius: 3px;
			background-color: #D6EFE8;
			color: $base-color-blue;
			top: 50%;
			transform: translate(-50%, -50%);
			text-align: center;
		}

		@mixin main-title {
			display: flex;
			position: relative;
			align-items: center;

			&>* {
				margin-right: 10px;
				font-size: 14px;
				font-weight: 600;
				color: #1f2d3d;
			}

			.add-main-item {
				position: absolute;
				right: 0;
				color: #475669;
				font-weight: 400;

				&>i {
					margin-right: 8px;
					color: $base-color-blue;
				}
			}
		}

		@mixin flex-align-center {
			display: flex;
			align-items: center;
		}

		.pannel-title {
			margin-bottom: 20px;
			font-size: 16px;
			font-weight: 700;
		}

		.pannel-content {
			position: relative;
			padding-left: 33px;

			&>.line {
				@include pointer-line;

				span {
					@include line-span-position;
				}
			}

			.user-attribute {
				@include box-base-setup;

				.attribute-title {
					@include main-title;
				}

				.contentProperties {
					position: relative;
					padding-left: 33px;

					.secondButton {
						width: 22px;
						height: 22px;
						line-height: 22px;
						background: #f5faff;
						border-radius: 3px;
						border: 1px solid #d3dce6;
						font-size: 12px;
						color: #99a9bf;
						margin-right: 8px;
					}

					.el-row-mode {
						margin-left: 34px;
						margin-top: 8px;
					}

					.line-item {
						margin-right: 10px;
					}

					.little-line-item {
						margin-right: 6px;
					}

					.indexButton {
						display: inline-block;
						background: #2dca93;
						color: #fff;
						width: 20px;
						height: 20px;
						border-radius: 2px;
						font-size: 14px;
						line-height: 20px;
						text-align: center;
						position: relative;
						margin-right: 14px;
					}

					&>.line {
						@include pointer-line;

						span {
							@include line-span-position;
						}
					}

					.action-item,
					.attribute-item,
					.actionOrder-item {
						margin: 10px 0 0 10px;

						.actionOrder-item-item {
							margin-top: 5px;
						}
					}

					.el-form-item {
						margin-bottom: 0px;
					}
				}

			}

			.user-actions {
				@include box-base-setup;

				.attribute-title {
					@include main-title;
				}

				.contentProperties {
					position: relative;
					padding-left: 33px;

					.el-row-mode {
						margin-left: 34px;
						margin-top: 8px;
					}

					.line-item {
						margin-right: 10px;
					}

					.little-line-item {
						margin-right: 6px;
					}

					.indexButton {
						display: inline-block;
						background: #2dca93;
						color: #fff;
						width: 20px;
						height: 20px;
						border-radius: 2px;
						font-size: 14px;
						line-height: 20px;
						text-align: center;
						position: relative;
						margin-right: 14px;
					}

					&>.line {
						@include pointer-line;

						span {
							@include line-span-position;
						}
					}

					.action-item,
					.attribute-item,
					.actionOrder-item {
						margin: 10px 0 0 10px;

						.actionOrder-item-item {
							margin-top: 5px;
						}
					}

					.el-form-item {
						margin-bottom: 0px;
					}
				}

			}

			.user-actions-order {
				@include box-base-setup;

				.attribute-title {
					@include main-title;
				}

				.contentProperties {
					position: relative;
					padding-left: 33px;

					.secondButton {
						width: 22px;
						height: 22px;
						line-height: 22px;
						background: #f5faff;
						border-radius: 3px;
						border: 1px solid #d3dce6;
						font-size: 12px;
						color: #99a9bf;
						margin-right: 8px;
					}

					.el-row-mode {
						margin-left: 34px;
						margin-top: 8px;
					}

					.line-item {
						margin-right: 10px;
					}

					.little-line-item {
						margin-right: 6px;
					}

					.indexButton {
						display: inline-block;
						background: #2dca93;
						color: #fff;
						width: 20px;
						height: 20px;
						border-radius: 2px;
						font-size: 14px;
						line-height: 20px;
						text-align: center;
						position: relative;
						margin-right: 14px;
					}

					&>.line {
						@include pointer-line;

						span {
							@include line-span-position;
						}
					}

					.action-item,
					.attribute-item,
					.actionOrder-item {
						margin: 10px 0 0 10px;

						.actionOrder-item-item {
							margin-top: 5px;
						}
					}

					.el-form-item {
						margin-bottom: 0px;
					}
				}

			}

		}

		.preview-count-people {
			margin-bottom: 12px;
			font-size: 16px;
			font-weight: 700;
			display: inline-block;
		}

		.caclResult {
			margin-left: 10px;
			color: #475669;
			font-size: 14px;
			line-height: 25px;
			font-weight: bold;
		}
	}
</style>
